<template>
    <div>
        <h1><em>生产蜡烛残次品统计</em></h1>
        <div class="seach">
            <el-date-picker clearable v-model="Time" type="date" value-format="yyyy-MM-dd" placeholder="请选择时间"
                style="margin-left: 30px">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索
            </el-button>
        </div>
        <div class="left">
            <div class="tab">

                <el-table :data="tableData" style="width: 100%;"
                    :header-cell-style="{ background: '#6eaef5', color: '#ffffff', 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }" border>
                    <el-table-column prop="count1" label="蜡脏">
                    </el-table-column>
                    <el-table-column prop="count2" label="灯芯偏">
                    </el-table-column>
                    <el-table-column prop="count3" label="液面气泡不平整">
                    </el-table-column>
                    <el-table-column prop="count4" label="胎膜破口">
                    </el-table-column>
                    <el-table-column prop="count5" label="蜡杂质">
                    </el-table-column>
                    <el-table-column prop="count6" label="其他">
                    </el-table-column>
                </el-table>
            </div>
            <div class="count" ref="count1" style="height: 300px"></div>
            <div class="count" ref="count2" style="height: 300px"></div>
            <div class="count" ref="count3" style="height: 300px"></div>
            <div class="count" ref="count4" style="height: 300px"></div>
            <div class="count" ref="count5" style="height: 300px"></div>
            <div class="count" ref="count6" style="height: 300px"></div>
        </div>
        <div class="right">
            <div class="tab">
                <!-- <h1><em>生产蜡烛残次品统计</em></h1> -->
                <el-table :data="tableData2" style="width: 100%;"
                    :header-cell-style="{ background: '#6eaef5', color: '#ffffff', 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }" border>
                    <el-table-column prop="count1" label="蜡脏">
                    </el-table-column>
                    <el-table-column prop="count2" label="灯芯偏">
                    </el-table-column>
                    <el-table-column prop="count3" label="液面气泡不平整">
                    </el-table-column>
                    <el-table-column prop="count4" label="胎膜破口">
                    </el-table-column>
                    <el-table-column prop="count5" label="蜡杂质">
                    </el-table-column>
                    <el-table-column prop="count6" label="其他">
                    </el-table-column>
                </el-table>
            </div>
            <div class="count" ref="count7" style="height: 300px"></div>
            <div class="count" ref="count8" style="height: 300px"></div>
            <div class="count" ref="count9" style="height: 300px"></div>
            <div class="count" ref="count10" style="height: 300px"></div>
            <div class="count" ref="count11" style="height: 300px"></div>
            <div class="count" ref="count12" style="height: 300px"></div>
        </div>




    </div>
</template>
<script>
import * as echarts from 'echarts';
import { listDefective, lineDefective, listDefective2, lineDefective2 } from '@/api/system/defective.js'
export default {
    data() {
        return {
            tableData: [],
            cLine1: [],
            cLine2: [],
            cLine3: [],
            cLine4: [],
            cLine5: [],
            cLine6: [],
            date: [],
            tableData2: [],
            cLine7: [],
            cLine8: [],
            cLine9: [],
            cLine10: [],
            cLine11: [],
            cLine12: [],
            date2: [],
            Time: ""

        };
    },
    mounted() {
        this.defectiveGet()
        this. defectiveGet2()
        this.getLine()
        this.getLine2()
        this.getCount1()
        this.getCount2()
        this.getCount3()
        this.getCount4()
        this.getCount5()
        this.getCount6()
       
        this.getCount7()
        this.getCount8()
        this.getCount9()
        this.getCount10()
        this.getCount11()
        this.getCount12()
       


    },
    methods: {
        // 机器一的表格
        defectiveGet() {
            listDefective().then(res => {
                this.tableData = res.data
            })
        },
        // 机器二的表格
        defectiveGet2() {
            listDefective2().then(res => {
                console.log(res);
                this.tableData2 = res.data
            })
        },
        // 搜索
        handleQuery() {
            this.getLine()
            this.getLine2()
        },
        // 曲线一  -----左边一列的所有曲线
        getLine() {

            lineDefective(this.Time).then(res => {
                // console.log(res);
                this.cLine1 = res.data[0]
                this.cLine2 = res.data[1]
                this.cLine3 = res.data[2]
                this.cLine4 = res.data[3]
                this.cLine5 = res.data[4]
                this.cLine6 = res.data[5]
                this.date = res.data[6]
                this.getCount1()
                this.getCount2()
                this.getCount3()
                this.getCount4()
                this.getCount5()
                this.getCount6()

            })

        },
          // 曲线二  -----右边一列的所有曲线
        getLine2() {

            lineDefective2(this.Time).then(res => {
                console.log(res);
                this.cLine7 = res.data[0]
                this.cLine8 = res.data[1]
                this.cLine9 = res.data[2]
                this.cLine10 = res.data[3]
                this.cLine11 = res.data[4]
                this.cLine12 = res.data[5]
                this.date2 = res.data[6]
                // console.log(this.cLine7);
                // this.getCount7( )
                this.getCount8()
                this.getCount9()
                this.getCount10()
                this.getCount11()
                this.getCount12()

            })

        },
        getCount1() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count1);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                    data: ['蜡脏'],
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {
                        name: "蜡脏",
                        data: this.cLine1,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount2() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count2);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                    data: ['灯芯偏'],
                },
                tooltip: {

                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },

                series: [
                    {
                        name: "灯芯偏",
                        data: this.cLine2,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount3() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count3);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                    data: ['液面气泡不平整'],
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {
                        name: '液面气泡不平整',
                        data: this.cLine3,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount4() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count4);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                    data: ['胎膜破口'],
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {
                        name: "胎膜破口",
                        data: this.cLine4,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount5() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count5);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                    data: ['蜡杂质'],
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {
                        name: '蜡杂质',
                        data: this.cLine5,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount6() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count6);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                    data: ['其他'],
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {
                        name: '其他',
                        data: this.cLine6,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount7() {
            setInterval(() => {
                // console.log(this.date);
                const e = echarts.init(this.$refs.count7);
                const option = {
                    xAxis: {
                        type: 'category',
                        data: this.date,
                        name: '时间'
                    },
                    yAxis: {
                        type: 'value',
                        name: '个数'
                    },
                    legend: {
                        data: ['蜡脏'],
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                            label: {
                                backgroundColor: "#6a7985",
                            },
                        },
                    },
                    series: [
                        {
                            name: "蜡脏",
                            data: this.cLine7,
                            type: 'line',
                            markPoint: {
                                data: [
                                    {
                                        type: "max",
                                    },
                                    {
                                        type: "min",
                                    },
                                ],
                            },
                            markLine: {
                                data: [{ type: "average" }],
                            },
                        }
                    ]
                };
                e.setOption(option);
            })
        },
        getCount8() {
            setInterval(() => {
       
      
            // console.log(this.date);
            const e = echarts.init(this.$refs.count8);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                    data: ['灯芯偏'],
                },
                tooltip: {

                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },

                series: [
                    {
                        name: "灯芯偏",
                        data: this.cLine8,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
                e.setOption(option);
            });
        },
        getCount9() {
            // console.log(this.date);
            setInterval(() => {
                const e = echarts.init(this.$refs.count9);
                const option = {
                    xAxis: {
                        type: 'category',
                        data: this.date,
                        name: '时间'
                    },
                    yAxis: {
                        type: 'value',
                        name: '个数'
                    },
                    legend: {
                        data: ['液面气泡不平整'],
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                            label: {
                                backgroundColor: "#6a7985",
                            },
                        },
                    },
                    series: [
                        {
                            name: '液面气泡不平整',
                            data: this.cLine9,
                            type: 'line',
                            markPoint: {
                                data: [
                                    {
                                        type: "max",
                                    },
                                    {
                                        type: "min",
                                    },
                                ],
                            },
                            markLine: {
                                data: [{ type: "average" }],
                            },
                        }
                    ]
                };
                e.setOption(option);
            })
        },
        getCount10() {
            setInterval(() => {
                // console.log(this.date);
                const e = echarts.init(this.$refs.count10);
                const option = {
                    xAxis: {
                        type: 'category',
                        data: this.date,
                        name: '时间'
                    },
                    yAxis: {
                        type: 'value',
                        name: '个数'
                    },
                    legend: {
                        data: ['胎膜破口'],
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                            label: {
                                backgroundColor: "#6a7985",
                            },
                        },
                    },
                    series: [
                        {
                            name: "胎膜破口",
                            data: this.cLine10,
                            type: 'line',
                            markPoint: {
                                data: [
                                    {
                                        type: "max",
                                    },
                                    {
                                        type: "min",
                                    },
                                ],
                            },
                            markLine: {
                                data: [{ type: "average" }],
                            },
                        }
                    ]
                };
                e.setOption(option);
            })
        },
        getCount11() {
            setInterval(() => {
                // console.log(this.date);
                const e = echarts.init(this.$refs.count11);
                const option = {
                    xAxis: {
                        type: 'category',
                        data: this.date,
                        name: '时间'
                    },
                    yAxis: {
                        type: 'value',
                        name: '个数'
                    },
                    legend: {
                        data: ['蜡杂质'],
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                            label: {
                                backgroundColor: "#6a7985",
                            },
                        },
                    },
                    series: [
                        {
                            name: '蜡杂质',
                            data: this.cLine11,
                            type: 'line',
                            markPoint: {
                                data: [
                                    {
                                        type: "max",
                                    },
                                    {
                                        type: "min",
                                    },
                                ],
                            },
                            markLine: {
                                data: [{ type: "average" }],
                            },
                        }
                    ]
                };
                e.setOption(option);
            })
        },
        getCount12() {
            setInterval(() => {
                // console.log(this.date);
                const e = echarts.init(this.$refs.count12);
                const option = {
                    xAxis: {
                        type: 'category',
                        data: this.date,
                        name: '时间'
                    },
                    yAxis: {
                        type: 'value',
                        name: '个数'
                    },
                    legend: {
                        data: ['其他'],
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                            label: {
                                backgroundColor: "#6a7985",
                            },
                        },
                    },
                    series: [
                        {
                            name: '其他',
                            data: this.cLine12,
                            type: 'line',
                            markPoint: {
                                data: [
                                    {
                                        type: "max",
                                    },
                                    {
                                        type: "min",
                                    },
                                ],
                            },
                            markLine: {
                                data: [{ type: "average" }],
                            },
                        }
                    ]
                };
                e.setOption(option);
            })
        },
    },
    components: {},
    props: {},
    watch: {},
    computed: {},
    created() { },
};
</script>
<style lang="scss" scoped>
.left,
.right {
    width: 50%;
    // border: 1px red solid;
    float: left;
}

.tab {
    // #6eaef5
    width: 90%;
    margin: 60px auto;


}

h1 {
    text-align: center;
    color: #6280c6;
    font-size: 35px;

}

.seach {
    margin-top: 20px;
    margin-left: 75%;
}

.count {
    text-align: center;
}
</style>